<template>
  <div class="fans-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <BreadCard>粉丝管理</BreadCard>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="粉丝列表" name="list">
           <div class="fans_list">
            <div class="fans_item"
            v-for="fan in fans"
            :key="fan.id.toString()">
              <el-avatar :size="80" :src="fan.photo"></el-avatar>
              <p>{{fan.name}}</p>
              <el-button type="primary" plain size="small">+关注</el-button>
            </div>
          </div>
          <el-pagination
            background
            :page-size="20"
            @current-change="changePage"
            layout="prev, pager, next"
            :total="total_count">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="chart">
           <!-- 准备dom容器，让echarts在这里画图
            注意：
            1. 要指定宽，高
            2. 设置ref，方便我们访问这个dom元素
            -->
          <div ref="main" style="width: 600px;height: 400px"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Fans',
  data () {
    return {
      activeName: 'list',
      curPage: 1,
      fans: [],
      total_count: 0
    }
  },
  created () {
    this.getFans()
  },
  methods: {
    getFansData () {
      // 获取接口数据，并返回
      // 接口不是很稳定 刷新
      return this.$http({
        method: 'GET',
        url: '/mp/v1_0/statistics/followers'
      })
    },
    buildDataForEchart (obj) {
      // 接收一个对象，返回两个数组
      // Object.keys(obj)获取obj对象的键
      // 对le和gt进行字符串替换 还有其他方法吗？
      // TODO 其他方法实现 对数组的遍历以及对字符串的替换
      console.log(obj)
      const xData = Object.keys(obj).map(item => item.replace('le', '小于').replace('gt', '大于'))
      const yData = Object.values(obj)
      return {
        xData,
        yData
      }
    },
    async draw () {
      // 取回数据
      const res = await this.getFansData()
      // 对数据进行加工
      const { xData, yData } = this.buildDataForEchart(res.data.data.age)
      console.log(xData, yData)
      // 填充到对应的options中去
      // 用echarts来画图
      // 1、初始化echarts对象
      var myChart = echarts.init(this.$refs.main)
      // 2、通过固定格式的option来画图
      var option = {
        title: {
          text: '粉丝画像'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
        },
        series: [{
          name: '年龄分布',
          type: 'line',
          data: yData
        }]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    async getFans () {
      const res = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/followers',
        params: {
          page: this.curPage
        }
      })
      console.log('resfans', res)
      this.fans = res.data.data.results
      this.total_count = res.data.data.total_count
    },
    changePage (page) {
      // 1、改变页码
      this.curPage = page
      // 2、刷新页面
      this.getFans()
    },
    handleClick () {
      console.log(this.activeName)
      if (this.activeName === 'chart') {
        this.draw()
      }
    }
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
